<br/>
<div class='form_container' style='width:660px'>
	<table cellpadding='0' cellspacing='0' style='width:660px'>
	<tr>
		<td rowspan="2" style='width:200px'>
			<form>
				<fieldset>
					<legend>{translate}Choose surgery type{/translate}</legend>
					{foreach item=catergory from=$superGroups}
						<br/><input type='radio' name='group' value="{$catergory.group_id}" 
						onclick="javascrip:changeSurgeryGroup({$catergory.group_id},'_div','group_filter','selectedCatergoryId')" />
						{$catergory.group_name}
					{/foreach}
				</fieldset>
			</form>
		</td>
		<td id='group_filter' class='field' style='display:block'>
		{foreach name=outer item=subGroup from=$subGroups}
			<div id="{$subGroup.div}" style='display:none'>
				<select id="{$subGroup.select}" name="{$subGroup.select}">
					{foreach item=item from=$subGroup.group}
					<option value="{$item.group_id}" label="{$item.group_name}">{$item.group_name}</option>
					{/foreach}
				</select>
			</div>
		{/foreach}
		</td>
	</tr>
	<tr>
		<td class='field'>
			<div id='search_button'>
				<a href="javascript:listSurgeryServiceInGroup();" title="{translate}List of surgery services{/translate}">
					<img src="../images/search.png" alt="{translate}List{/translate}" />
				</a>
			</div>
			<div style="display:none;">
				<img src="../images/ajax-loader.gif"/>
			</div>			
		</td>
	</tr>
	<tr>
		<td id="mess_available" class="field" colspan='2'></td>
	</tr>
	</table>
	<input type="hidden" id='selectedCatergoryId' value=''/>
</div>

<div id="service_container" style="display:none; margin-top: 5px">	
	<table id="service_list" cellspacing="0" cellpadding="0" class="grid" width="680px">
		<thead>
			<tr>
				<th class='first'>{translate}Order number{/translate}</th>
				<th style='width: 400px'>{translate}Service{/translate}</th>
				<th style='width: 25px'>{translate}SP{/translate}</th>
				<th style='width: 25px'>I</th>
				<th style='width: 25px'>II</th>
				<th style='width: 25px'>III</th>
				<th class='last'>&nbsp;</th>						
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<table class="total_table" cellspacing="0" cellpadding="0" width="680px">
		<tr style="height: 40px;">
			<td class="first last"><span class="label">{translate}Total{/translate}: <span id="totalSurService"></span></span></td>
		</tr>
	</table>	
</div>

{include file="surgery/element_div_edit_group.html"}